import React from 'react';
import styles from './index.less';
import { Select } from 'antd';
import { getTimesPoint, initTime } from '../../helper';

const options = initTime();
export const PeriodPicker = ({ startTimeValue = 1, endTimeValue = 1, onChange, list = [] }) => {
  const onChangeFun = (v, key) => {
    onChange?.(v.label, key);
  };

  // 根据开始时间和结束时间判断是否有冲突，有冲突则显示红色
  const getLeftStyleFun = () => {
    let count = 0;
    list.forEach((i) => {
      const leftValue = getTimesPoint(i.startTime);
      const endValue = getTimesPoint(i.endTime);
      if (startTimeValue >= leftValue && startTimeValue <= endValue) count++;
      if (startTimeValue > endTimeValue) count += 2;
    });
    return count <= 1 ? {} : { color: '#eb5757' };
  };

  // 根据开始时间和结束时间判断是否有冲突，有冲突则显示红色
  const getRightStyleFun = () => {
    let count = 0;
    list.forEach((i) => {
      const leftValue = getTimesPoint(i.startTime);
      const endValue = getTimesPoint(i.endTime);
      if (endTimeValue >= leftValue && endTimeValue <= endValue) count++;
      if (startTimeValue > endTimeValue) count += 2;
    });
    return count <= 1 ? {} : { color: '#eb5757' };
  };

  return (
    <div className={styles.picker}>
      <Select
        style={getLeftStyleFun()}
        showArrow={false}
        dropdownMatchSelectWidth={60}
        value={startTimeValue}
        options={options}
        onChange={(_, v) => onChangeFun(v, 'startTime')}
      />
      -
      <Select
        style={getRightStyleFun()}
        dropdownMatchSelectWidth={60}
        showArrow={false}
        value={endTimeValue}
        options={options}
        onChange={(_, v) => onChangeFun(v, 'endTime')}
      />
    </div>
  );
};
